<template>
	<view class="cash-page">
		<view class="top-box">
			<view class="price">
				<text class="icon">￥</text>
				<text class="value">{{ total_amount }}</text>
			</view>
			<!-- <view class="discount">随机立减：￥0.33</view> -->
		</view>
		<view class="bottom-box">
			<button class="btn" @click="show = true">支付</button>
		</view>
		
		<u-popup :show="show" mode="bottom" round="32rpx" :customStyle="{ background: '#eee' }" @close="show = false">
			<view class="popup-box">
				<view class="title-box">请选择支付方式</view>
				<view class="popup-content">
					<scroll-view scroll-y class="scroll">
						<view class="box">
							<view class="item" @click="weixinPayment">
								<image class="icon" src="@/static/icon-3.png" mode="aspectFill"></image>
								<view class="content">
									<view class="title">微信支付</view>
								</view>
							</view>
							<view class="item" @click="passwordPopupOpen">
								<image class="icon" src="@/static/icon-4.png" mode="aspectFill"></image>
								<view class="content">
									<view class="title">{{ config.trade_currency }}</view>
									<view class="surplus">(可用{{ config.trade_currency }}:{{ userInfo.deposit }})</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="payShow" mode="bottom" round="20rpx" closeable @close="passwordPopupClose">
			<view class="pay-box">
				<view class="title-box">请输入支付密码</view>
				<view class="popup-content">
					<u-code-input v-model="code" dot></u-code-input>
				</view>
				<u-number-keyboard
					:random="false"
					:dotDisabled="true"
					mode="number"
					@backspace="keyboardBackspace"
					@change="keyboardChange"
				></u-number-keyboard>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { payOrder, getMaterial, getConfig } from '@/api/api'
	
	export default {
		data () {
			return {
				pageType: '',
				
				total_amount: '',
				trade_sn: '',
				
				userInfo: {
					deposit: 0
				},
				
				/* 支付弹窗 */
				show: false,
				
				/* 支付密码弹窗 */
				payShow: false,
				code: '',
				
				config: {},
			}
		},
		onLoad (options) {
			this.total_amount = options.total_amount
			this.trade_sn = options.trade_sn
			this.pageType = options.type
		},
		onShow () {
			this.loadData()
		},
		methods: {
			async loadData () {
				uni.showLoading({ mask: true })
				
				let userReq = await getMaterial()
				if (userReq) {
					this.userInfo = userReq.data.data
				}
				
				getConfig().then(res => {
					if (res) {
						this.config = res.data
					}
				})

				uni.hideLoading({ noConflict: true })
			},
			weixinPayment () {
				uni.showLoading({ mask: true })
				
				payOrder({
					target_type: 'orderall',
					target: this.trade_sn,
					pay: [{
						pay_type: 'miniapp',
						money: this.total_amount
					}]
				}).then(res => {
					uni.hideLoading({ noConflict: true })
					if (res) {
						uni.requestPayment({
							nonceStr: res.data.payParams.nonceStr,
							package: res.data.payParams.package,
							paySign: res.data.payParams.paySign,
							timeStamp: res.data.payParams.timeStamp,
							signType: res.data.payParams.signType,
							success: (e) => {
								uni.showToast({
									title: '支付成功',
									icon: 'none'
								})
								
								if (this.pageType == 'code') {
									uni.redirectTo({
										url: '/pages/my/code'
									})
								} else {
									uni.redirectTo({
										url: '/pages/my/order/order'
									})
								}
							},
							fail: (err) => {
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								})
							}
						})
					}
				})
			},
			depositPayment (password) {
				uni.showLoading({ mask: true })
				
				payOrder({
					target_type: 'orderall',
					tradepwd: password,
					target: this.trade_sn,
					pay: [{
						pay_type: 'deposit',
						money: this.total_amount
					}]
				}).then(res => {
					uni.hideLoading({ noConflict: true })
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
				
						if (this.pageType == 'code') {
							uni.redirectTo({
								url: '/pages/my/code'
							})
						} else {
							uni.redirectTo({
								url: '/pages/my/order/order'
							})
						}
					}
				})
			},
			passwordPopupOpen () {
				if (this.userInfo.is_pwd != 1) {
					uni.showModal({
						content: '您暂未设置支付密码',
						confirmText: '去设置',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/my/payPass/setPayPass'
								})
							}
						}
					})
					return
				}
				
				let deposit = Number(this.userInfo.deposit)
				let amount = Number(this.total_amount)
				
				if (deposit >= amount) {
					this.show = false
					this.payShow = true
					this.code = ''
				} else {
					uni.showToast({
						title: '余额不足',
						icon: 'none'
					})
					this.show = false
				}
			},
			passwordPopupClose () {
				this.payShow = false
			},
			keyboardChange (val) {
				if (this.code.length < 6) {
					this.code += val
					
					if (this.code.length === 6) {
						let password = this.code
						this.payShow = false
						
						this.depositPayment(password)
					}
				}
			},
			keyboardBackspace () {
				if (this.code.length) {
					this.code = this.code.substr(0, this.code.length - 1)
				}
			},
		}
	}
</script>

<style lang="scss">
.cash-page {
	min-height: 100%;
	background-color: $bg-color;
	.top-box {
		padding: 56rpx 0;
		text-align: center;
		.price {
			color: #ff4612;
			.icon {
				font-size: 28rpx;
			}
			.value {
				font-size: 48rpx;
			}
		}
		.discount {
			margin-top: 14rpx;
			color: #666666;
			font-size: 24rpx;
		}
	}
	.bottom-box {
		position: fixed;
		left: 36rpx;
		right: 36rpx;
		bottom: 120rpx;
		z-index: 10;
		.btn {
			border-radius: 80rpx;
			color: #fff;
			font-size: 34rpx;
			line-height: 80rpx;
			background-color: #5749f7;
		}
	}
	.popup-box {
		.title-box {
			color: #666;
			font-size: 28rpx;
			font-weight: bold;
			text-align: center;
			line-height: 80rpx;
		}
		.popup-content {
			padding: 0 30rpx 30rpx;
			.scroll {
				max-height: 70vh;
				.box {
					.item {
						margin-bottom: 20rpx;
						padding: 0 30rpx;
						height: 120rpx;
						border-radius: 14rpx;
						background-color: #fff;
						display: flex;
						align-items: center;
						.icon {
							width: 40rpx;
							height: 40rpx;
						}
						.content {
							margin-left: 20rpx;
							.title {
								color: #333333;
								font-size: 32rpx;
							}
							.surplus {
								margin-top: 10rpx;
								color: #666666;
								font-size: 24rpx;
							}
							.label {
								margin-top: 10rpx;
								color: #333;
								font-size: 28rpx;
							}
						}
					}
					.new {
						padding: 0 30rpx;
						height: 90rpx;
						border-radius: 14rpx;
						background-color: #fff;
						display: flex;
						align-items: center;
						.content {
							margin-left: 20rpx;
							.title {
								color: #333333;
								font-size: 32rpx;
							}
						}
					}
				}
			}
			.btn {
				margin-top: 72rpx;
				border-radius: 80rpx;
				height: 80rpx;
				color: #fff;
				font-size: 34rpx;
				font-weight: bold;
				background-color: #5749f7;
			}
		}
	}
	.pay-box {
		.title-box {
			height: 88rpx;
			color: #333;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			line-height: 88rpx;
		}
		.popup-content {
			padding: 32rpx;
			display: flex;
			justify-content: center;
		}
	}
}
</style>
